html, body, page {
	height: 100%;
}

.index_view {
	color: #333;
	background-color: #f4f5f7;
	@extend .ff_fw400;
}

.mh100v {
	min-height: 100vh;
}

.ff_fw400 {
	font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
	font-weight: 400;
}

.f24_fw400 {
	font-size: 24rpx;
	@extend .ff_fw400;
}

.h100b {
	height: 100%;
}

.w100b {
	width: 100%;
}

.hw100b {
	@extend .h100b;
	@extend .w100b;
}

.bg_white {
	background: #ffffff;
}

.box_shadow {
	box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.cur_pointer {
	cursor: pointer;
}

// margin or padding

.mt10 {
	margin-top: 10rpx;
}

.mb10 {
	margin-bottom: 10rpx;
}

.ml10 {
	margin-left: 10rpx;
}

.mr10 {
	margin-right: 10rpx;
}

.pt10 {
	margin-top: 10rpx;
}

.pb10 {
	margin-bottom: 10rpx;
}

.pl10 {
	margin-left: 10rpx;
}

.pr10 {
	margin-right: 10rpx;
}

.mt20 {
	margin-top: 20rpx;
}

// flex

.flex {
	display: flex;
}

.flex_center {
	@extend .flex;
	justify-content: center;
}

.flex_align {
	@extend .flex;
	align-items: center;
}

.flex_center_align {
	@extend .flex_center;
	@extend .flex_align;
}

.flex_nowarp {
	@extend .flex;
	flex-wrap: nowrap;
}

.flex_warp {
	@extend .flex;
	flex-wrap: wrap;
}

.flex_between {
	@extend .flex;
	justify-content: space-between;
}

.flex_around {
	@extend .flex;
	justify-content: space-around;
}

.flex_evenly {
	@extend .flex;
	justify-content: space-evenly;
}

.flex_row {
	@extend .flex;
	flex-direction: row;
}

.flex_column {
	@extend .flex;
	flex-direction: column;
}

.flex_end {
	@extend .flex;
	justify-content: flex-end;
}

// anm

@keyframes fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade_right {
	from {
		transform: scale(1.2);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slide_left {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide_leftR {
	from {
		transform: translateX(0);
		opacity: 0;
	}

	to {
		transform: translateX(100%);
		opacity: 1;
	}
}

@keyframes slide_down {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide_downR {
	from {
		transform: translateY(0);
		opacity: 1;
	}

	to {
		transform: translateY(100%);
		opacity: 0;
	}
}